<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="../js/vue.js"></script>
</head>

<body>
	<!-- 
	通过一个对象变量，将元素的style属性当做一个对象来绑定，便于修改单个css属性
	经过编译为字符串后，固定不变的style和动态的style的css属性最终合并为一个style属性 
	示例: 用上下左右四个按钮控制一个小方块的移动
-->
	<div id="app">
		<button @click="onUp">上</button>
		<button @click="onDown">下</button>
		<button @click="onLeft">左</button>
		<button @click="onRight">右</button>
		<div id="pop" style="position: fixed;
          width: 100px;
          height: 100px;
          background-color: pink;" :style="styleObject"></div>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				styleObject: {
					top: "200px",
					left: "200px",
				},
				//这部分初始编译为: "top:200px; left:200px"s
				//可通过开发者工具查看页面元素
			},
			methods: {
				onUp() {  //上
					var top = parseInt(this.styleObject.top);
					top -= 20;
					this.styleObject.top = top + "px";
				},
				onDown() { //下
					var top = parseInt(this.styleObject.top);
					top += 20;
					this.styleObject.top = top + "px";
				},
				onLeft() {   //左
					var left = parseInt(this.styleObject.left);
					left -= 20;
					this.styleObject.left = left + "px";
				},
				onRight() {  //右	
					var left = parseInt(this.styleObject.left);
					left += 20;
					this.styleObject.left = left + "px";
				}
			},
		});
	</script>
</body>

</html>